<!--  -->
<template>
    <div class='page-main'>
        <div class="container">
            <div class="box" style="background:linear-gradient(-125deg,#57bdbf,#2f9de2)" title="点击去审核"
                @click="goPage(0)">
                <div class="left">
                    <p>司机待审核</p>
                    <p>{{ statistics.driver }}人</p>
                </div>
                <div class="right">
                    <i class="el-icon-s-home"></i>
                </div>
            </div>
            <div class="box" style="background:linear-gradient(-141deg,#ecca1b,#f39526)" title="点击去审核"
                @click="goPage(1)">
                <div class="left">
                    <p>车辆待审核</p>
                    <p>{{ statistics.car }}辆</p>
                </div>
                <div class="right">
                    <i class="el-icon-user"></i>
                </div>
            </div>
            <div class="box" style="background:linear-gradient(-125deg,#ff7d7d,#fb2c95)" title="点击去审核"
                @click="goPage(2)">
                <div class="left">
                    <p>待审核运单</p>
                    <p>{{ statistics['pendingReview '] }}单</p>
                </div>
                <div class="right">
                    <i class="el-icon-s-finance"></i>
                </div>
            </div>
            <div class="box" style="background:linear-gradient(-113deg,#4169E1,	#4169E1)" title="点击去查看"
                @click="goPage(3)">
                <div class="left">
                    <p>待支付运单</p>
                    <p>{{ statistics.pendingPaymentOrder }}单</p>
                </div>
                <div class="right">
                    <i class="el-icon-s-order"></i>
                </div>
            </div>
            <div class="box" style="background:linear-gradient(-113deg,	#3CB371,#3CB371)" title="点击去查看"
                @click="goPage(4)">
                <div class="left">
                    <p>支付验证单数</p>
                    <p>{{ statistics.checkPay }}单</p>
                </div>
                <div class="right">
                    <i class="el-icon-data-line"></i>
                </div>
            </div>
            <div class="box" style="background:linear-gradient(-113deg,#c543d8,#925cc3)" title="点击去查看"
                @click="goPage(5)">
                <div class="left">
                    <p>支付失败单数</p>
                    <p>{{ statistics.payFail }}单</p>
                </div>
                <div class="right">
                    <i class="el-icon-data-analysis"></i>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { homeDisplay } from '@/api/index'
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            statistics: {
                car: 0,
                checkPay: 0,
                driver: 0,
                payFail: 0,
                pendingPaymentOrder: 0,
                "pendingReview ": 0
            },
            pushPath: [
                '/driverCarManager/driverAuditing?status=2',
                '/driverCarManager/carAuditing?status=2',
                '/moneyManagment/auditing?xiugai=1',
                '/moneyManagment/auditing?status=1',
                '/moneyManagment/vaildate',
            ],
            timer: null,
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        async homeDisplay() {
            let res = await homeDisplay();
            if (res.status == 1) {
                this.statistics = res.data;
                if (Number(this.statistics.car) > 0) {
                    this.$notify({
                        title: '提示',
                        message: `当前有待审核车辆${this.statistics.car}辆`,
                        duration: 0,
                        customClass: 'custom-class-notify',
                        offset: 200,
                        position: 'bottom-right',
                        type: 'warning'
                    });
                }

                this.$nextTick(() => {
                    if (Number(this.statistics.driver) > 0) {
                        this.$notify({
                            title: '提示',
                            message: `当前有待审核司机${this.statistics.driver}人`,
                            duration: 0,
                            customClass: 'custom-class-notify',
                            offset: 200,
                            position: 'bottom-right',
                            type: 'warning'
                        });
                    }
                })
            }
        },
        goPage(index) {
            this.$router.push(this.pushPath[index])
        },
        polling() {
            if (this.timer) {
                return;
            }
            this.timer = setInterval(async () => {

                await this.homeDisplay();
                this.$notify.closeAll()
                if (Number(this.statistics.car) > 0) {
                    this.$notify({
                        title: '提示',
                        message: `当前有待审核车辆${this.statistics.car}辆`,
                        duration: 0,
                        customClass: 'custom-class-notify',
                        offset: 200,
                        position: 'bottom-right',
                        type: 'warning'
                    });
                }

                this.$nextTick(() => {
                    if (Number(this.statistics.driver) > 0) {
                        this.$notify({
                            title: '提示',
                            message: `当前有待审核司机${this.statistics.driver}人`,
                            duration: 0,
                            customClass: 'custom-class-notify',
                            offset: 200,
                            position: 'bottom-right',
                            type: 'warning'
                        });
                    }
                })

            }, 30 * 1000)
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.homeDisplay();
        this.polling();
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() {
        clearInterval(this.timer);
        this.$notify.closeAll()
    }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.page-main {
    height: calc(100vh - 70px);
}

.container {
    width: 100%;
    height: 70%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;

    .box {
        padding: 30px 20px;
        display: flex;
        justify-content: space-between;
        width: 30%;
        height: 40%;
        border-radius: 10px;
        cursor: pointer;

        &>.left {
            width: 70%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            &>p {
                color: #fff;
            }

            &>p:nth-of-type(2n-1) {
                font-size: 20px;
            }

            &>p:nth-of-type(3) {
                font-size: 24px;
            }

            &>p:nth-of-type(2n) {
                font-size: 24px;
            }
        }

        &>.right {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 30%;
            height: 100%;

            &>i {
                font-size: 100px;
                color: #97d4dc;
            }
        }
    }
}
</style>